<!--数据管理页面的展示内容  组织结构-->
<template>
    <div>
        <!--        显示一共多少条数据-->
        <div class="total">
            <img src="../../assets/images/Shape@2x.png" alt="">
            <p>总计：{{this.$store.state.total}}条记录</p>
        </div>
        <!--        左侧的组织结构，用的是ant中的导航菜单-->
        <div class="left">
            <p>组织结构</p>
            <div class="zuzhi">
                <a-tree @select="onSelect" v-for="(item,index) in list" :key="index">
                    <!--                    <a-icon slot="switcherIcon" type="down" />-->
                    <a-tree-node :key="item.id" :title="item.label">
                        <a-tree-node :key="item1.id" :title="item1.label"
                                     v-for="(item1,index1) in list[index].children">
                            <a-tree-node :key="item2.id" :title="item2.label"
                                         v-for="(item2,index2) in list[index].children[index1].children">
                                <a-tree-node :key="item3.id" :title="item3.label"
                                             v-for="(item3,index3) in list[index].children[index1].children[index2].children">
                                    <a-tree-node :key="index4" :title="item2.label"
                                                 v-for="(item4,index4) in list[index].children[index1].children[index2].children[index3].children">

                                    </a-tree-node>
                                </a-tree-node>
                            </a-tree-node>
                        </a-tree-node>
                    </a-tree-node>
                </a-tree>
            </div>
        </div>
        <!--        右侧数据列表-->
        <!--                重命名-->
        <div class="changename" @click="bl" v-show="chongming==true">
            <div>
                <div>
                    <span>重命名</span>
                    <input type="text" v-model="value">
                </div>
                <a-button type="primary" class="btn1" @click="cheng">
                    确认
                </a-button>
                <a-button class="btn1" @click="quxiao">取消</a-button>
            </div>
        </div>
        <div class="right">
            <!--            最上面的展示-->
            <ul class="topMessage">
                <li>序号</li>
                <li>文件名称</li>
                <li>缩略图</li>
                <li>页数</li>
                <li>来源</li>
                <li>大小</li>
                <li>时间</li>
                <li>类型</li>
            </ul>
            <!--            数据列表的展示-->
            <ul class="mainMessage" v-for="(item,index) in newList" :key="index" @click="block(index)">

                <li>{{index+1}}</li>
                <li>{{item.fileName}}</li>
                <li><img src="../../assets/images/Rectangle6备3@2x.png" alt=""></li>
                <li>{{item.pageNumber}}</li>
                <li>{{item.fileUrl}}</li>
                <li>{{item.fileSize}}</li>
                <li>{{item.createDate}}</li>
                <li v-if="item.fileType==='1'">.pptx</li>
                <li v-else-if="item.fileType==='2'">.docx</li>
                <li v-else-if="item.fileType==='3'">.mp3</li>
                <li v-else-if="item.fileType==='4'">.mp4</li>
                <li v-else-if="!(item.fileType.split('').indexOf('5')===-1&&item.fileType.split('').indexOf('6')===-1&&item.fileType.split('').indexOf('7')===-1)">图集</li>
                <li v-else-if="item.fileType==='8'">.doc</li>
                <li v-else>暂无数据</li>
                <!--                重命名，删除，下载，查看-->
                <div class="pro" ref="pro">
                    <div class="box"></div>
                    <ul>
                        <li @click="chakan(item)">
                            重命名
                        </li>
                        <li>
                            <a-button type="dashed" @click="del(item.id,item.connectionId,item.connectionType)"
                                      class="btn">
                                删除
                            </a-button>
                        </li>

                        <li v-if="item.fileType==='1'"><a :href="`http://172.16.193.8:8856/qbservices/minio/download?connectionType=1&fileName=${item.uploadFileName}&id=${item.connectionId}`">下载</a></li>
                        <li v-else-if="item.fileType==='2'"><a :href="`http://172.16.193.8:8856/qbservices/minio/download?connectionType=1&fileName=${item.uploadFileName}&id=${item.connectionId}`">下载</a></li>
                        <li v-else-if="item.fileType==='3'"><a :href="`http://172.16.193.8:8856/qbservices/minio/download?connectionType=2&fileName=${item.uploadFileName}&id=${item.connectionId}`">下载</a></li>
                        <li v-else-if="item.fileType==='4'"><a :href="`http://172.16.193.8:8856/qbservices/minio/download?connectionType=2&fileName=${item.uploadFileName}&id=${item.connectionId}`">下载</a></li>
                        <li v-else-if="!(item.fileType.split('').indexOf('5')===-1&&item.fileType.split('').indexOf('6')===-1&&item.fileType.split('').indexOf('7')===-1)"><a :href="`http://172.16.193.8:8856/qbservices/minio/download?connectionType=3&fileName=${item.fileName}&id=${item.id}`">下载</a></li>
                        <li v-else-if="item.fileType==='8'"><a :href="`http://172.16.193.8:8856/qbservices/minio/download?connectionType=1&fileName=${item.uploadFileName}&id=${item.connectionId}`">下载</a></li>
                        <li v-else>暂无数据</li>

                        <li v-if="item.fileType==='1'">
                            <router-link :to="{path:'/InfordateView',query:{id:item.connectionId}}">查看</router-link>
                        </li>
                        <li v-else-if="item.fileType==='2'">
                            <router-link :to="{path:'/InfordateView',query:{id:item.connectionId}}">查看</router-link>
                        </li>
                        <li v-else-if="item.fileType==='3'">
                            <router-link :to="{path:'/ProductView',query:{id:item.connectionId}}">查看</router-link>
                        </li>
                        <li v-else-if="item.fileType==='4'">
                            <router-link :to="{path:'/ProductVideo',query:{id:item.connectionId}}">查看</router-link>
                        </li>
                        <li v-else-if="!(item.fileType.split('').indexOf('5')===-1&&item.fileType.split('').indexOf('6')===-1&&item.fileType.split('').indexOf('7')===-1)">
                            <router-link :to="{path:'/galDateView',query:{atlasId:item.connectionId,newItem:item}}">查看</router-link>
                        </li>
                        <li v-else-if="item.fileType==='8'">
                            <router-link :to="{path:'/InfordateView',query:{id:item.connectionId}}">查看</router-link>
                        </li>

                        <li v-else>暂无数据</li>
                    </ul>
                </div>
            </ul>
            <!--           弹出是否确定删除   -->
            <a-modal
                    v-model="visible"
                    title="提示"
                    cancelText="取消"
                    okText="确认"
                    @ok="handleOk"
            >
                <p>您确定要删除吗</p>
            </a-modal>
            <!--        下面的共多少条数据，第多少页-->
            <div class="paging">
                <p>共<span>{{this.ta}}</span>条数据，第 {{this.$store.state.pageNum}}/{{Math.ceil(this.ta /7)}} 页</p>
                <!--            分页-->
                <!--            分页-->
                <a-pagination :current="this.$store.state.pageNum" :total="(Math.ceil(this.ta / 7)*10)"
                              @change="onChange"/>
            </div>
        </div>

    </div>
</template>

<script>
    import {getCategoryTree, datuALl, delDatu, selectALl, chongDatu} from "../../api/api";
    export default {
        inject: ['reload'],
        name: "DatumMessage",
        data() {
            return {
                list: [],
                child: [],
                id: "",
                total: "",
                fileType: "",
                fileid: "",
                visible: false,
                visable: false,
                connectionId: "",
                connectionType: "",
                ta: "",
                chongming: false,
                value: "",
                promat: "",
                changevalue: null
            }
        },
        updated() {
            // console.log(Number(this.$store.state.total))
            this.ta = Number(this.$store.state.total)
            this.$nextTick(function () {
                this.promat = this.$refs.pro
                console.log(this.promat)
            })
        },
        created() {
            getCategoryTree().then(res => {
                console.log(res)
                // console.log(res.list)
                this.list = res.list
                // console.log(this.list[0].id)
                // console.log(typeof this.list[0].id)
                // console.log(res.list[0].children)
            })
        },
        computed: {

            newList() {
                return (this.$store.state.datumList)
            }

        },
        watch: {},
        methods: {
            onChange(current) {
                this.current = current;
                this.$store.commit("changePageNum", this.current)
                console.log(this.$store.state.obj)
                selectALl(7, this.current, this.id, this.type, this.filename, this.starttime, this.endtime).then(res => {
                    this.$store.commit("changeDatumList", res.page.list)
                    this.$store.commit("changeTotal", res.page.total)
                })

            },
            //删除
            del(id, connectionId, connectionType) {
                this.fileid = id
                this.connectionId = connectionId
                this.visible = true
                this.connectionType = connectionType
                console.log(this.fileid)
                console.log(this.connectionId)
            },
            handleOk() {
                delDatu(this.fileid, this.connectionId, this.connectionType).then(res => {
                    console.log(res)
                    datuALl(7, 1).then(res => {
                        this.list = res.page.list
                        console.log(res)
                        this.visible = false;
                        selectALl(7, 1, this.id, this.type, this.filename, this.starttime, this.endtime).then(res => {
                            this.$store.commit("changeDatumList", res.page.list)
                            this.$store.commit("changeTotal", res.page.total)
                            this.$message.success('删除成功');
                        })
                    })
                })
                this.reload()
            },
            handleCancel(e) {
                console.log(e);
                this.visible = false;
            },
            //单击左侧的组织结构
            onSelect(selectedKeys, info) {
                this.id = selectedKeys[0];
                console.log(this.id)
                console.log('selected', selectedKeys, info);
                selectALl(7, 1, this.id, this.$store.state.obj.fileType, this.$store.state.obj.name, this.$store.state.obj.startTime, this.$store.state.obj.endTime).then(res => {
                    console.log(res)
                    this.total = res.page.total
                    this.$store.commit("changeDatumList", res.page.list)
                })
            },
            bl() {

            },
            chakan(item) {
                this.fileid = item.id
                this.connectionId = item.connectionId
                this.connectionType = item.connectionType
                console.log(this.fileid)
                console.log(this.connectionId)
                console.log(this.connectionType)
                this.chongming = true
            },
            cheng() {
                chongDatu(this.fileid, this.connectionId, this.connectionType, this.value).then(res => {
                    console.log(res)
                    this.chongming = false
                    selectALl(7, 1, this.id, this.$store.state.obj.fileType, this.$store.state.obj.name, this.$store.state.obj.startTime, this.$store.state.obj.endTime).then(res => {
                        console.log(res)
                        this.total = res.page.total
                        this.$store.commit("changeDatumList", res.page.list)
                    })
                })

            },
            quxiao() {
                this.chongming = false
            },
            block(index) {
                // 获取单击事物的索引
                // 通过索引让指定的提示框显示
                // 首先判断提示框是不是显示单击重复的话会隐藏
                if (this.promat[index].style.display === "block") {
                    this.promat[index].style.display = "none"
                } else {
                    for (let i = 0; i < this.promat.length; i++) {
                        this.promat[i].style.display = "none"
                    }
                    this.promat[index].style.display = "block"
                }
            },
            showDeleteConfirm() {
                this.$confirm({
                    title: '确认删除',
                    content: '你确认删除改文件吗？',
                    okText: '确认',
                    okType: 'danger',
                    cancelText: '取消',
                    onOk() {
                        console.log('OK');
                    },
                    onCancel() {
                        console.log('Cancel');
                    },
                });
            },
        }
    }

</script>

<style scoped lang="less">
    * {
        list-style: none;
    }

    .total {
        margin-top: 16px;
        width: 1088px;
        height: 40px;
        overflow: hidden;
        background: #E6F7FF;
        border: 1px solid #BAE7FF;
        border-radius: 4px;

        img {
            width: 14px;
            height: 14px;
            /*background: #1890FF;;*/
            float: left;
            margin: 13px 8px 13px 16px;
        }

        p {
            width: 112px;
            height: 22px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.65);
            line-height: 22px;
            float: left;
            margin-top: 9px;
        }
    }

    /*    左侧的多级联动*/
    .left {
        width: 191px;
        height: 532px;
        background-color: rgba(250, 250, 250, 1);
        float: left;
        margin-top: 16px;
        overflow: auto;
        padding-bottom: 20px;

        p {
            width: 56px;
            height: 20px;
            font-size: 14px;
            font-family: PingFangSC-Semibold;
            line-height: 20px;
            color: #333333;
            opacity: 1;
            margin-bottom: 0px;
            margin-left: 15px;
            margin-top: 9px;
            font-weight: 600;
        }
    }

    /*    右侧数据列表*/
    .right {
        float: right;
        margin-top: 16px;
        margin-left: 11px;
        width: 884px;
        height: 532px;
    }

    .topMessage {
        width: 100%;
        height: 54px;
        padding: 0;
        margin-bottom: 0;
        background-color: #fafafa;

        li {
            color: rgba(0, 0, 0, 1);
            float: left;
            width: 96px;
            height: 54px;
            text-align: center;
            line-height: 54px;
            background-color: #fafafa !important;
        }

        li:nth-of-type(1) {
            width: 84px;
        }

        li:nth-of-type(2) {
            width: 182px;
        }

        li:nth-of-type(3) {
            width: 128px;
        }
    }

    .mainMessage {
        position: relative;
        margin-bottom: 0;
        border-bottom: 1px solid #E8E8E8;
        padding: 0;
        width: 100%;
        height: 55px;
        line-height: 55px;

        li {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            cursor: pointer;
            color: rgba(0, 0, 0, 1);
            float: left;
            width: 96px;
            height: 55px;
            text-align: center;
            line-height: 55px;
        }

        li:nth-of-type(1) {
            width: 84px;
        }

        li:nth-of-type(2) {
            width: 182px;
        }

        li:nth-of-type(3) {
            width: 128px;

            img {
                width: 68px;
                height: 48px;
            }
        }

        li:nth-of-type(4),
        li:nth-of-type(6),
        li:nth-of-type(7) {
            text-decoration: underline;
        }
    }

    /*    查看框*/
    .pro {
        display: none;
        box-sizing: border-box;
        position: absolute;
        top: 46px;
        left: 510px;
        z-index: 100;
        background-color: #FFFFFF;
        border: 1px solid #dbdbdb;

        .box {
            width: 18px;
            height: 18px;
            position: absolute;
            left: 18px;
            top: -10px;
            z-index: 200;
            background-color: #FFFFFF;
            border: 1px solid #dbdbdb;
            border-right: none;
            border-bottom: none;
            transform: rotate(45deg);
        }

        ul {
            margin-top: 12px;
            height: 128px;
            padding: 0;

        }

        width: 140px;
        height: 150px;

        li {
            padding-left: 23px;
            float: none;
            width: 140px !important;
            height: 32px !important;
            line-height: 32px !important;
            text-align: left;
        }

        li:nth-of-type(2) {
            padding: 0px;
        }

        li:hover {
            background-color: #F5F5F5 !important;
            color: #2A7EFB;

            .ant-btn {
                background-color: #F5F5F5 !important;
            }
        }
    }

    /*分页*/
    .paging {
        position: absolute;
        bottom: 0;
        width: 870px;
        height: 64px;
        line-height: 34px;
        overflow: hidden;
        display: flex;
        justify-content: space-between;

        p {
            width: 164px;
            height: 22px;
            float: left;
            margin-top: 21px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.45);
            line-height: 22px;
            margin-bottom: 0;
        }

        /deep/ .ant-pagination {
            margin-top: 16px;
            margin-left: -100px;
        }

    }

    .ant-btn-dashed {
        border: none;
    }

    .ant-btn {
        text-align: left;
        padding-left: 23px;
        width: 140px;
        color: rgba(0, 0, 0, 1);
        transition-duration: 0ms;
    }

    .ant-btn:hover {
        background-color: #F5F5F5;
    }

    .zuzhi {
        ul {
            background-color: #fafafa !important;

            li {
                background-color: #fafafa !important;
            }
        }

        background-color: #fafafa !important;
        padding-left: 20px;
    }

    /*    重命名*/
    .changename {
        /*display: none;*/
        width: 360px;
        height: 180px;
        background: #FFFFFF;
        border: 1px solid #C3C1C1;
        border-radius: 4px;
        position: fixed;
        z-index: 100;
        top: 300px;
        left: 700px;
        text-align: center;

        div {
            margin-top: 40px;

            span {
                font-size: 14px;
                font-family: PingFangSC-Regular;
                color: rgba(0, 0, 0, 0.25);
                margin-right: 10px;
            }

            input {
                width: 214px;
                height: 32px;
                padding: 0 16px 0 16px;
                outline: none;
                border: 1px solid rgba(0, 0, 0, 0.1);
            }
        }
    }

    .btn1 {
        width: 64px;
        height: 32px;
        padding: 0;
        text-align: center;
        margin-right: 20px;
        margin-top: 20px;
    }
</style>
